/*
  学习目标：使用Ref获取dom元素、组件实例对象 - 与vue中ref作用类似
  作用：ref获取dom元素、组件实例对象
  1. 通过 React.createRef() 创建 ref 对象
  2. 通过 标签上的ref属性，绑定好变量
  3. ref对象的.current获取到真实 组件实例/DOM对象
*/

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

// 1. 通过React.createRef创建ref对象
const inputRef = React.createRef();
const childRef = React.createRef();

class App extends React.Component {
  // 也可以写在组件内，那么就是组件的变量，通过this.inputRef访问
  // inputRef = React.createRef();
  // childRef = React.createRef();

  handleClick = () => {
    // 3.通过ref获取组件实例
    console.log('inputRef.current----->', inputRef.current);
    // focus()聚焦方法
    inputRef.current.focus();
  };
  render() {
    return (
      <div>
        {/* 2.通过标签上的ref属性，绑定好变量 */}
        <input type="text" ref={inputRef} />
        <button onClick={this.handleClick}>点我获取input元素并且聚焦</button>
      </div>
    );
  }
}

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(<App></App>);
